<style>

    .layui-col-space1 > * {
        padding: 10px;
    }

    .grid-box {
        background: #ffffff;
        border-radius: 5px;
        height: 250px;
        border: 1px solid transparent;
    }

    .grid-box:hover {
        box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .1);
        border: 1px solid #e6e6e6;
    }

    .grid-box .title {
        border-bottom: 1px solid #E4EAEC;
        padding: 8px 0;
        margin: 0 8px;
        font-weight: bold;
        color: #707070;
    }

    .grid-box .title img {
        width: 20px;
    }

    .grid-box .content .amount {
        font-family: "Microsoft Yahei";
        color: #E46353;
        font-size: 30px;
    }
    .grid-box .content .amount2 {
        font-family: "Microsoft Yahei";
        color: #E46353;
        font-size: 22px;
        float:right;
        padding-right:20px;
    }
    .grid-box .content .amount-txt {
        float: right;
        width: 40%;
        text-align: right;
        padding-right:30px;
        font-size: 20px;
    }

    .grid-box .content .amount-txt p {
        margin-top: 40px;
        height: 20px;
    }
    .grid-box .title .unit{
        float:right;font-weight: normal;color: #999 !important;
    }
    .grid-count{
        float:left;
        margin-left:20px;
        border:1px solid #E4EAEC;
        width:30%;
        height:100px;
    }
    .grid-box .content{
        padding:10px 5px;
    }
    .grid-box .content .order-info{
        margin-top:5px;
        padding-bottom: 5px;
        border-bottom:1px dashed #E4EAEC;
    }
    .grid-box .content .order-info img{
        width:25px;
        height:25px;
        margin-left: 10px;
        border-radius: 50%;
    }
    .grid-box .content .store-info{
        margin-top:5px;
        padding-bottom: 5px;
        border-bottom:1px dashed #E4EAEC;
    }
    .grid-box .content .store-info img{
        width:40px;
        height:40px;
        margin-left: 10px;
        border-radius: 50%;
    }
    .user-box{
        clear:both;
        width:94%;
        border:1px solid #E6E6E6;
        height:80px;
        margin-left:10px;
        margin-top:100px;

    }
    .user-box .user-info{
        padding-top:10px;
        float:left;width: 25%;text-align: center;
        line-height:30px;
        font-size:16px;
    }
    .all-info-count{
        float:left;width: 50%;height:300px;margin-top:50px;
    }
    .all-info-count .icon{
        float:left;width:30%;text-align: center;line-height: 70px;
    }
    .all-info-count .icon img{
        width:45px;
    }
    .all-info-count .content{
        float:left;width:35%;
    }
    .all-info-count .content .p1{
        font-size: 18px;margin-top:10px;
    }
    .all-info-count .content .p2{
        font-size: 13px;margin-top:5px;
    }
</style>
<div class="layui-row layui-col-space1">
    <div class="layui-col-md4">
        <div class="grid-demo grid-box">
            <div class="title">
                <img src="./static/icon/amount.svg"/> 今日销售额<span class="unit">（单位：元）</span>
            </div>
            <div class="content">
                <div style="float:left;width: 50%;">
                    <div style="font-size: 15px;padding:8px; border-bottom: 1px dashed #E4EAEC;line-height: 40px;">
                        <p style="color: #E46353;font-size:20px;"><span style="font-size: 15px;">¥ </span>800.05</p>
                        <p>阿创自营店</p>
                    </div>
                    <div style="font-size: 15px;padding:8px;line-height: 40px;">
                        <p style="color: #E46353;font-size:20px;"><span style="font-size: 15px;">¥ </span>700.00</p>
                        <p>其他入驻商户</p>
                    </div>
                </div>
                <div class="amount-txt">
                    <p><span class="amount"><span style="font-size: 20px;">¥</span>1500.05</span></p>
                    <p>今日销售总额</p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="grid-demo grid-box">
            <div class="title">
                <img src="./static/icon/order-num.svg"/> 今日订单<span class="unit">（单位：单）</span>
            </div>
            <div class="content">
                <div style="float:left;width: 70%;font-size:14px;">
                    <p class="order-info"><img src="./static/images/tx.jpg" /> &nbsp;购买了手绘图一张 <i style="color:red;">¥3</i></p>
                    <p class="order-info"><img src="./static/images/tx.jpg" /> &nbsp;购买了手绘图一张 <i style="color:red;">¥6</i></p>
                    <p class="order-info"><img src="./static/images/tx.jpg" /> &nbsp;购买了手绘图一张 <i style="color:red;">¥7</i></p>
                    <p class="order-info"><img src="./static/images/tx.jpg" /> &nbsp;购买了手绘图一张 <i style="color:red;">¥9</i></p>
                    <p class="order-info"><img src="./static/images/tx.jpg" /> &nbsp;购买了手绘图一张 <i style="color:red;">¥4</i></p>
                </div>
                <div class="amount-txt" style="width: 20%;">
                    <p class="amount">32</p>
                    <p>订单数</p>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="layui-col-md3">-->
        <!--<div class="grid-demo grid-box">-->
            <!--<div class="title">-->
                <!--<img src="./static/icon/comment-num.svg"/> 最新评论-->
            <!--</div>-->
            <!--<div class="content">-->
                <!--今日销售额-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-col-md4">
        <div class="grid-demo grid-box" style="height:320px;">
            <div class="title">
                <img src="./static/icon/store-num.svg"/> 店铺销售排行
            </div>
            <div class="content">
                <div style="float:left;width: 100%;padding:0 8px;font-size:16px;">
                    <p class="store-info"><span class="layui-badge">1</span><img src="./static/images/tx.jpg" /> &nbsp;张三手绘店
                        <span class="amount2"><span style="font-size: 15px;">¥</span> 300.0</span>
                    </p>
                    <p class="store-info"><span class="layui-badge layui-bg-orange">2</span><img src="./static/images/tx.jpg" /> &nbsp;王五外卖店
                        <span class="amount2"><span style="font-size: 15px;">¥</span> 623</span>
                    </p>
                    <p class="store-info"><span class="layui-badge layui-bg-green">3</span><img src="./static/images/tx.jpg" /> &nbsp;阿创自营店
                        <span class="amount2"><span style="font-size: 15px;">¥</span> 732</span>
                    </p>
                    <p class="store-info"><span class="layui-badge layui-bg-gray">4</span><img src="./static/images/tx.jpg" /> &nbsp;李四烧烤店
                        <span class="amount2"><span style="font-size: 15px;">¥</span> 932</span>
                    </p>
                    <p class="store-info"><span class="layui-badge layui-bg-blue">5</span><img src="./static/images/tx.jpg" /> &nbsp;刘刘自助餐店
                        <span class="amount2"><span style="font-size: 15px;">¥</span> 412</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="width: 100%;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="orderChart" style="float:left;width: 50%;height:300px;"></div>
    <div class="all-info-count">
        <div style="float:left;width:35%;background: #FFFDF6;height:70px;margin-left:10px;">
            <div class="icon"><img src="./static/icon/goods.svg"/></div>
            <div class="content">
                <p class="p1">78</p>
                <p class="p2">自营商品数</p>
            </div>
            <div class="content">
                <p class="p1">278</p>
                <p class="p2">其他商品数</p>
            </div>
        </div>
        <div  style="float:left;width:35%;background: #F9F9F9;height:70px;margin-left:10px;">
            <div class="icon"><img src="./static/icon/order.svg"/></div>
            <div class="content">
                <p class="p1">78</p>
                <p class="p2">自营订单数</p>
            </div>
            <div class="content">
                <p class="p1">278</p>
                <p class="p2">其他订单数</p>
            </div>
        </div>
        <div style="float:left;width:22%;background: #F4FBFF;height:70px;margin-left:10px;">
            <div class="icon" style="line-height: 55px;width:50%;"><img src="./static/icon/store2.svg"></div>
            <div class="content">
                <p class="p1">78</p>
                <p class="p2">店铺数</p>
            </div>
        </div>
        <div class="user-box">
            <div class="user-info">
                <p>0</p>
                <p>今日新增</p>
            </div>
            <div class="user-info">
                <p>0</p>
                <p>昨日新增</p>
            </div>
            <div class="user-info">
                <p>0</p>
                <p>本月新增</p>
            </div>
            <div class="user-info">
                <p>1260</p>
                <p>会员总数</p>
            </div>
        </div>
    </div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="width: 100%;">
    <div id="cpuChart" style="float:left;width: 50%;height:400px;"></div>
    <div id="storageChart" style="float:left;width: 50%;height:400px;"></div>
</div>
<script type="text/javascript" src="./static/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        var orderChart = echarts.init(document.getElementById('orderChart'));

        $.get('./data/echarts1.json', function (data) {

            orderOption = {
                title: {
                    text: '订单统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['男生','女生','不限']
                },
                g商品rid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'男生',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'女生',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'不限',
                        type:'line',
                        stack: '总量',
                        data:[150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };
            orderChart.setOption(orderOption);
        });





        // 基于准备好的dom，初始化echarts实例
        var cpuChart = echarts.init(document.getElementById('cpuChart'));
        var cupOption = {
            title: {
                text: 'CPU使用率'
            },
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 50, name: 'CPU使用率'}]
                }
            ]
        };

        setInterval(function () {
            cupOption.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            cpuChart.setOption(cupOption, true);
        }, 2000);

        // 基于准备好的dom，初始化echarts实例
        var storageChart = echarts.init(document.getElementById('storageChart'));
        var storageOption = {
            title: {
                text: '内存使用率'
            },
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 50, name: '内存使用率'}]
                }
            ]
        };

        setInterval(function () {
            storageOption.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            storageChart.setOption(storageOption, true);
        }, 2000);
    });
</script>